<!DOCTYPE html>
<html>
<!--
This page attempts to redirect users to a page specific to their
browser. Contact the Khronos WebGL group to update the URL for
your browser or add your browser to the list of browsers.
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>WebGL Troubleshooting</title>
<script type="text/javascript" src="DoNotCopyOrLinkThisFileElseYouWillNotGetAutoUpdatedHelpForYourUsers.js"></script>
<script type="text/javascript">
window.onload = main;

function main() {
  var link = document.getElementById("link");
  var b = BrowserDetect;
  b.init();
  var name = b.browser;
  if (name == "unknown") {
    name = "your browser";
  }
  // check if the browser even knows what WebGL2 is
  if (!window.WebGL2RenderingContext) {
    link.innerHTML = "Click Here to learn about upgrading "
       + name + " on " + b.platform + " to a browser that supports WebGL2";
    link.href = b.urls.upgradeUrl || "/get.webgl.org/webgl2";
    return;
  }
  link.innerHTML = "Click Here for WebGL troubleshooting info for "
       + name + " on " + b.platform;
  link.href = b.urls.troubleshootingUrl;
}
</script>
<style>
 /* zero margins */
 html, body { margin:0; padding:0; background-color: #888;}

 /* trigger scolling */
 p { margin:10em 0; }

 /* position:fixed */
 .outer { position:fixed; top:0; left:0; width:100%; height:100%; }

 /* certering */
 .middle { height:100%; display:table; margin:0 auto; }
 .inner { vertical-align:middle; display:table-cell; }

 .msg {
   background-color: white;
   border: 15px solid white;
   border-radius: 15px;
 }
</style>

<!--[if lte IE 6]>
 <style>
  /* position:fixed for ie6 */
  html { overflow-x:auto; overflow-y:hidden; }
  body { overflow-y:auto; height:100%; }
  .outer { position:absolute; }
 </style>
<![endif]-->

<!--[if lte IE 7]>
 <style>
  /* centering for ie6/ie7 */
  .middle { position:absolute; top:50%; left:50%; height:auto; }
  .inner { position:relative; top:-50%; left:-50%; }
 </style>
<![endif]-->
</style>
</head>
<body>
<div class="outer">
 <div class="middle">
  <div class="inner">
    <div class="msg">
      <a id="link"></a>
    </div>
  </div>
 </div>
</div></body>
</html>

